<template>
	<view class="content">
		<!-- 顶部导航栏组件 -->
		<QSNavbar :navbarItems="navbarItems_1" backgroundColor="#4BA677"></QSNavbar>
		<!-- 气泡背景图 -->
		<view class="bubble-back">
			<u--image :src="bubbleBackgroundImage" width="100%" :showMenuByLongpress="false" mode="widthFix">
			</u--image>
			<view class="text-info">
				<u--text text="绑定手机号码" size="20" :bold="true"></u--text>
				<u--text text="信息将于当前微信绑定(用于身份验证)" size="16"></u--text>
			</view>
			<view class="getPhoneNumber">
				<u-button type="primary" text="获取手机号" open-type="getPhoneNumber"
					@getphonenumber="onGetPhoneNumber"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import QSNavbar from '@/components/QS-Navbar/QS-Navbar.vue';
	const index = require('@/api/personal/index.js')
	export default {
		components: {
			QSNavbar
		},
		data() {
			return {
				navbarItems_1: [{
					type: 'icon',
					icon: 'back',
					layout: 'left',
					width: 15,
					doEvent: 'back',
					iconColor: '#fff'
				}, {
					type: 'text',
					text: '',
					width: 70,
					weight: 'bold',
					color: '#fff',
					textAlign: 'left'
				}],
				bubbleBackgroundImage: this.$https.assetsPath + '3a2d36f8b226f37603f756fef62f2b91c8091ef8.png',
				encryptedData: '',
				iv: "",
				codes: '',
				popo: "",
				value1: '',
				avatarUrls: this.$https.assetsPath + '75345690b19185b928428b228453948fbce293ba.png'
			};
		},
		onLoad(options) {
			let that = this
			// that.initData()
			that.navbarItems_1[1].text = options.applet_name
			wx.login({
				success(res) {
					// if (res.code) {
					that.codes = res.code
					// }
				}
			})
		},
		methods: {
			onChooseAvatar(e) {
				this.avatarUrls = e.detail.avatarUrl
			},
			bindGetUserInfo() {
				uni.getUserProfile({
					desc: '用于完善资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res1) => {
						this.iv = res1.iv
						this.encryptedData = res1.encryptedData
					},
					fail: (res) => {
						uni.showToast({
							icon: "none",
							title: '用户拒绝获取'
						})
					}
				})
			},
			onGetPhoneNumber(e) {
				let that = this
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") { //用户决绝授权
					//拒绝授权后弹出一些提示
				} else { //允许授权
					let params = {
						appid: that.$https.weixinAppId,
						encryptedData: e.detail.encryptedData,
						iv: e.detail.iv,
						code: that.codes,
						project_id: getApp().globalData.projectId,
						references: uni.getStorageSync("openidlist"),
						invite_code: uni.getStorageSync("codescene") //二维码用户openid
					}
					that.appletPhoneLogin(params)
				}
			},
			async appletPhoneLogin(params) {
				let that = this
				let data = params
				let result = await index.appletPhoneLogin(data)
				if (result.code == 1) {
					uni.setStorageSync('phone', result.data.phone)
					uni.setStorageSync('openid', result.data.openid)
					uni.removeStorage({
						key: 'openidlist',
						success: function(res) {}
					});
					uni.showLoading({
						success(res) {
							if (res.errMsg == 'showLoading:ok') {
								uni.hideLoading()
								uni.reLaunch({
									url: '/pages/personal/personal'
								})
							}
						}
					})
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '授权失败，请稍后再试'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
	}

	.bubble-back {
		width: 100%;
		height: 400rpx;
		position: relative;
	}

	.text-info {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}

	.getPhoneNumber {
		width: 700rpx;
		display: block;
		margin: auto;
	}

	.avatar-wrapper {
		border: none !important;
		background-color: #fff !important;
	}
</style>